<template>
  <div>
    todayFood recommend
    <el-table :data="foodList" style="width: 100%" border>
      <el-table-column label="序号" width="80" align="center" type="index" />

      <el-table-column prop="prop" label="菜品图片" width="width">
        <template slot-scope="scope">
          <img :src="scope.row.imgSrc" width="100px" height="100px">
        </template>
      </el-table-column>

      <el-table-column prop="name" label="菜品名称" width="width" />

      <el-table-column prop="price" label="价格" width="80px">
        <template slot-scope="scope">
          ¥ {{ scope.row.price | rounding }}
        </template>
      </el-table-column>
      <el-table-column prop="isRecommend" label="今日推荐" width="80px">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isRecommend"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      style="margin-top: 20px; textalign: center"
      :current-page="pageParams.page"
      :page-sizes="[3, 5, 10]"
      :page-size="pageParams.pageSize"
      :pager-count="4"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="pageParams.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: 'TodayFood',
  data() {
    return {
      foodList: [],

      // 分页参数
      pageParams: {
        page: 1,
        pageSize: 5,
        total: 0
      }

    }
  },
  mounted() {
    this.getFoodList()
  },
  methods: {
    // 获取菜品列表
    async getFoodList() {
      const res = await this.$API.foodlist.reqFoodList(this.pageParams)
      if (res.code === 200) {
        this.pageParams.total = res.data.total
        this.foodList = res.data.foodVoList
      }
    },

    // 分页函数
    handleSizeChange(newPageSize) {
      this.pageParams.pageSize = newPageSize
      this.getFoodList()
    },
    handleCurrentChange(current) {
      this.pageParams.page = current
      this.getFoodList()
    }
  }
}
</script>

<style scoped>
</style>
